<template>
  <div class="chart-container" ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { getHomeJcje } from '@/api/shouye'; 

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  methods: {
    async fetchChartData() {
      try {
        const response = await getHomeJcje();
        this.processChartData(response.data);
      } catch (error) {
        console.error('获取图表数据失败:', error);
      }
    },
    processChartData(data) {
      const chartData = {
        xAxis: data.map(item => item.date),
        series: [data.map(item => item.value)]
      };
      this.setChartOption(chartData);
    },
    setChartOption(chartData) {
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
      this.chartInstance = echarts.init(this.$refs.chartContainer);
      this.chartInstance.setOption({
        title: {
          text: '示例图表'
        },
        tooltip: {},
        xAxis: {
          data: chartData.xAxis
        },
        yAxis: {},
        series: [{
          name: '数据',
          type: 'line',
          data: chartData.series[0]
        }]
      });
    }
  },
  mounted() {
    this.fetchChartData();
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>